
<style lang="less" scoped>
@import "../assets/css/common.less";

.home {
  .con {
    padding: 50px 0;
    .main {
      width: 50%;
      padding: 0 50px;
      margin: 0 auto;
      .tab {
        ul {
          li {
            display: inline-block;
            padding: 10px 40px 10px 0;
            cursor: pointer;
            &.active {
              color: @ch;
            }
          }
        }
      }
      .article {
        ul {
          padding: 30px 0;
          li {
            padding: 30px 0;
            .box {
              .pic {
                width: 22%;
                float: left;
                font-size: 0;
                overflow: hidden;
                img {
                  display: block;
                  width: 100%;
                }
              }
              .text {
                width: 78%;
                float: left;
                .title {
                  font-size: 18px;
                  font-weight: normal;
                  &:hover {
                    color: @ch;
                  }
                }
                .time {
                  padding-top: 15px;
                  display: block;
                  line-height: 1;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
    .black {
      .tab ul {
        border-bottom: 1px solid @c9;
        li {
          color: @c1;
          &:hover {
            color: @ch;
          }
        }
      }
      .article {
        ul {
          li {
            border-bottom: 1px solid @cf0;
            .box {
              color: @c1;
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="home">
    <Header />
    <Banner />
    <div></div>
    <div class="con">
      <div class="cistern">
        <div class="main black">
          <div class="tab">
            <ul>
              <li
                v-for="(item, index) in tabList"
                :key="index"
                :class="{active:acitveIndex === index}"
                @click="getDataList(item,index)"
              >{{item}}</li>
            </ul>
          </div>
          <div class="article">
            <ul>
              <li class="clearfix" v-for="(item, index) in articleList" :key="index">
                <nuxt-link class="box" :to="'/details/' + item._id">
                  <div class="pic">
                    <img :src="item.pic" alt />
                  </div>
                  <div class="text">
                    <h2 class="title">{{item.title}}</h2>
                    <span class="time">{{item.time}}</span>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/header.vue";
import Banner from "../components/banner.vue";

export default {
  name: "home",
  components: {
    Banner,
    Header
  },
  data() {
    return {
      tabList: "",
      acitveIndex: 0,
      articleList: ""
    };
  },
  async asyncData({ $axios }) {
    return await $axios
      .get(`/article/list/${encodeURI('热门推荐')}`)
      .then(({ data }) => {
        let tabList = ["热门推荐"];
        data.forEach(element => {
          tabList.push(element.type);
        });
        // 数组去重
        tabList = Array.from(new Set(tabList));

        // 反转数据
        data.reverse();

        return {
          tabList: tabList,
          articleList: data
        };
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    // 点击tab切换，获取数据
    getDataList(item, index) {
      // 设置当前tab标红
      this.acitveIndex = index;
      // 获取数据
      this.$axios
        .get(`/article/list/${encodeURI(item)}`)
        .then(({ data }) => {
          // 反转数据
          data.reverse();
            this.articleList= data
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
